<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: flora
 * @LastEditTime: 2021-10-14 12:20:39
-->
<template>
  <div>
    <!-- 天气 -->
    <div class="wrapper">
      <div class="content"></div>
      <div class="tianqi">
        <iframe width="280" scrolling="no" height="300" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=55&icon=1&site=12"></iframe>
      </div>
    </div>
    <!-- 热门片单 -->
    <div class="hot">
      <div class="title">热门片单</div>
      <hr>
      <div class="1">
        <a>7分以上的恐怖电影</a>
        <div class="tuijian">3599推荐</div>
      </div>
      <hr>
      <div class="2">
        <a>《视与听》250佳作</a>
        <div class="tuijian">337推荐</div>
      </div>
      <hr>
      <div class="3">
        <a>电影上的“三部曲”系列一</a>
        <div class="tuijian">3473推荐</div>
      </div>
      <hr>
      <div class="4">
        <a>我爱欧洲古装剧</a>
        <div class="tuijian">24推荐</div>
      </div>
      <hr>
      <div class="5">
        <a>【你连名字都那么牛逼】</a>
        <div class="tuijian">6092推荐</div>
      </div>

    </div>
  </div>
</template>


<style lang="scss" scoped>
//天气
  .wrapper{
    width: 70%;
    position: relative;
    .content{
      display: inline-block;
      width: 65%;
      height: 800px;
    }
    .tianqi{
      float: right;
      position: sticky;
      margin-top: 50px;
    }
  }
  //热门片单
  .hot{
    width: 250px;
    height: 400px;
    .title{
      color:#34924f;
      font-size: 25px;
    }
    div{
      a{
        text-decoration: none;
        color: #548cb7;
      }
      div{
        float: right;
        color: #aeaeae;
      }
    }
    hr{
      border: 1px solid  #f8f8f8;
      margin: 20px 0;
    }
  }
</style>

<script>
import Contact from './Contact.vue'

export default {
  components:{
    
    Contact,
  }
}
</script>